import React, { useState, useEffect } from "react";
import { UndoOutlined, UnorderedListOutlined, AppstoreOutlined, LineHeightOutlined, SearchOutlined, DeleteOutlined } from '@ant-design/icons';
import { Button, Table, Modal, Radio, DatePicker, message, Popconfirm } from 'antd';
import axios from 'axios';
import style from '../../cssmodule/NPP.module.css'
import { useNavigate, useParams } from "react-router-dom";
import * as XLSX from 'xlsx';

// 项目阶段列表
const NewProjectPhase = () => {
    const navigate = useNavigate();
    const { projectId } = useParams();
    // 状态管理
    const [tableData, setTableData] = useState([]);
    const [loading, setLoading] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [searchKeyword, setSearchKeyword] = useState('');
    const [currentPage, setCurrentPage] = useState(1);
    const [pageSize, setPageSize] = useState(10);
    const [total, setTotal] = useState(0);
    const [viewMode, setViewMode] = useState('list');

    // 表单状态
    const [formData, setFormData] = useState({
        phase: '',
        phaseType: '自研',
        bonusAmount: '',
        leader: '',
        startTime: null,
        endTime: null,
        period: '',
        hour: '',
        calculateWorkTime: '是',
        isConfirmPhase: '否',
        isPaymentPhase: '否',
        deliverFiles: [],
        remark: ''
    });

    // 获取项目阶段列表
    const fetchPhaseList = async () => {
        setLoading(true);
        try {
            const response = await axios.get('/projectPhase/list', {
                params: {
                    page: currentPage,
                    limit: pageSize,
                    search: searchKeyword
                }
            });

            if (response.data.success) {
                setTableData(response.data.data);
                setTotal(response.data.total);
            } else {
                message.error('获取数据失败');
            }
        } catch (error) {
            console.error('获取项目阶段列表失败:', error);
            message.error('获取数据失败');
        } finally {
            setLoading(false);
        }
    };

    // 组件挂载时获取数据
    useEffect(() => {
        fetchPhaseList();
    }, [currentPage, pageSize, searchKeyword]);

    // 搜索功能
    const handleSearch = (value) => {
        setSearchKeyword(value);
        setCurrentPage(1);
    };

    // 刷新功能
    const handleRefresh = () => {
        clearTimeout();
        message.success('正在刷新数据...');
        fetchPhaseList();
        setTimeout(() => {
            message.success('刷新完成');
        }, 1000)
    };

    // 表单输入处理
    const handleInputChange = (field, value) => {
        setFormData(prev => ({
            ...prev,
            [field]: value
        }));
    };

    // 时间选择处理
    const handleTimeChange = (field, date, dateString) => {
        setFormData(prev => ({
            ...prev,
            [field]: date
        }));

        // 自动计算工期天数
        if (field === 'startTime' && formData.endTime) {
            const start = date;
            const end = formData.endTime;
            if (start && end) {
                const diffTime = Math.abs(end - start);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                const diffHours = diffDays * 8; // 假设每天8小时
                setFormData(prev => ({
                    ...prev,
                    period: diffDays,
                    hour: diffHours
                }));
            }
        } else if (field === 'endTime' && formData.startTime) {
            const start = formData.startTime;
            const end = date;
            if (start && end) {
                const diffTime = Math.abs(end - start);
                const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                const diffHours = diffDays * 8; // 假设每天8小时
                setFormData(prev => ({
                    ...prev,
                    period: diffDays,
                    hour: diffHours
                }));
            }
        }
    };

    // 文件选择处理
    const handleFileChange = (field, checkedValues) => {
        setFormData(prev => ({
            ...prev,
            deliverFiles: checkedValues
        }));
    };

    // 显示模态框
    const showModal = () => {
        setIsModalOpen(true);
        // 重置表单数据
        setFormData({
            phase: '',
            phaseType: '自研',
            bonusAmount: '',
            leader: '',
            startTime: null,
            endTime: null,
            period: '',
            hour: '',
            calculateWorkTime: '是',
            isConfirmPhase: '否',
            isPaymentPhase: '否',
            deliverFiles: [],
            remark: ''
        });
    };

    // 确认添加
    const handleOk = async () => {
        // 验证必填字段
        if (!formData.phase || !formData.leader || !formData.startTime || !formData.endTime) {
            message.error('请填写必填字段');
            return;
        }

        try {
            const phaseData = {
                status: '未开始',
                statusType: 'gray',
                progress: '0%',
                phase: formData.phase,
                phaseType: formData.phaseType,
                leader: formData.leader,
                startTime: formData.startTime,
                endTime: formData.endTime,
                period: formData.period,
                hour: formData.hour,
                bonusType: '固定金额',
                bonusAmount: parseFloat(formData.bonusAmount) || 0,
                calculateWorkTime: formData.calculateWorkTime === '是',
                isConfirmPhase: formData.isConfirmPhase === '是',
                isPaymentPhase: formData.isPaymentPhase === '是',
                deliverFiles: formData.deliverFiles,
                files: formData.deliverFiles.join('；'),
                remark: formData.remark,
                creator: '当前用户'
            };

            const response = await axios.post('/projectPhase/create', phaseData);

            if (response.data.success) {
                message.success('项目阶段创建成功');
                setIsModalOpen(false);
                fetchPhaseList(); // 刷新列表
            } else {
                message.error(response.data.message || '创建失败');
            }
        } catch (error) {
            console.error('创建项目阶段失败:', error);
            message.error('创建失败');
        }
    };

    // 取消操作
    const handleCancel = () => {
        setIsModalOpen(false);
    };

    // 删除单个项目阶段
    const handleDelete = async (id) => {
        try {
            const response = await axios.delete(`/projectPhase/delete/${id}`);

            if (response.data.success) {
                message.success('删除成功');
                fetchPhaseList(); // 刷新列表
            } else {
                message.error(response.data.message || '删除失败');
            }
        } catch (error) {
            console.error('删除项目阶段失败:', error);
            message.error('删除失败');
        }
    };

    // 批量删除
    const handleBatchDelete = async () => {
        if (selectedRowKeys.length === 0) {
            message.warning('请选择要删除的项目阶段');
            return;
        }

        try {
            const response = await axios.delete('/projectPhase/batch-delete', {
                data: { ids: selectedRowKeys }
            });

            if (response.data.success) {
                message.success(response.data.message);
                setSelectedRowKeys([]); // 清空选择
                fetchPhaseList(); // 刷新列表
            } else {
                message.error(response.data.message || '批量删除失败');
            }
        } catch (error) {
            console.error('批量删除失败:', error);
            message.error('批量删除失败');
        }
    };

    // 全选/取消全选
    const handleSelectAll = (e) => {
        if (e.target.checked) {
            setSelectedRowKeys(tableData.map(row => row.id));
        } else {
            setSelectedRowKeys([]);
        }
    };

    // 单行选择
    const handleSelectRow = (id) => {
        setSelectedRowKeys(keys =>
            keys.includes(id) ? keys.filter(k => k !== id) : [...keys, id]
        );
    };

    const allChecked = selectedRowKeys.length === tableData.length && tableData.length > 0;
    const indeterminate = selectedRowKeys.length > 0 && selectedRowKeys.length < tableData.length;

    // 切换视图模式
    const handleViewModeChange = (mode) => {
        setViewMode(mode);
    };

    // 导出Excel函数
    const handleExportExcel = () => {
        if (!tableData.length) {
            message.info('没有可导出的数据');
            return;
        }
        const dataToExport = tableData.map(row => ({
            '状态': row.status,
            '进度': row.progress,
            '阶段名称': row.phase,
            '负责人': row.leader,
            '阶段开始时间': row.startTime ? new Date(row.startTime).toLocaleDateString() : '--',
            '阶段完结时间': row.endTime ? new Date(row.endTime).toLocaleDateString() : '--',
            '工期天数': row.period,
            '工时': row.hour,
            '实际完成时间': row.realEndTime ? new Date(row.realEndTime).toLocaleDateString() : '--',
            '实际工期天数': row.realPeriod || '--',
            '实际工时': row.realHour || '--',
            '需交付文件': row.files,
            '备注': row.remark
        }));
        const ws = XLSX.utils.json_to_sheet(dataToExport);
        const wb = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(wb, ws, '项目阶段列表');
        XLSX.writeFile(wb, '项目阶段列表.xlsx');
    };

    return (
        <>
            <div>
                <div>
                    <p className={style['project-title']}>
                        <span className={style['project-id']}>项目函数</span>
                        <span className={style['project-id']}>项目编号</span>
                        <span className={style['project-id']}>P123123231231</span>
                        <span className={style['project-id']}>项目名称:</span>
                        <span className={style['project-id']}>CRM系统</span>
                    </p>
                </div>

                <div className={style['project-body']}>
                    <div className={style['project-body-up']}>
                        <div>
                            <button className={style['project-button']} onClick={handleRefresh}>
                                <UndoOutlined />
                            </button>
                            <Button color="cyan" variant="solid" onClick={showModal}>+新增</Button>
                            {selectedRowKeys.length > 0 && (
                                <Popconfirm
                                    title="确定要删除选中的项目阶段吗？"
                                    onConfirm={handleBatchDelete}
                                    okText="确定"
                                    cancelText="取消"
                                >
                                    <Button
                                        color="red"
                                        variant="solid"
                                        icon={<DeleteOutlined />}
                                        style={{ marginLeft: 8 }}
                                    >
                                        批量删除 ({selectedRowKeys.length})
                                    </Button>
                                </Popconfirm>
                            )}
                        </div>
                        <Modal
                            title="基础信息"
                            open={isModalOpen}
                            onOk={handleOk}
                            onCancel={handleCancel}
                            okText="确认发署"
                            cancelText="取消"
                            width={1000}
                        >
                            <div className={style['modal-form-group']}>
                                <div className={style['modal-form-group-title']}>基础信息</div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段名称：</label>
                                    <input
                                        className={style['modal-form-input']}
                                        type="text"
                                        placeholder="请输入"
                                        value={formData.phase}
                                        onChange={(e) => handleInputChange('phase', e.target.value)}
                                    />
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段类型：</label>
                                    <Radio.Group
                                        onChange={(e) => handleInputChange('phaseType', e.target.value)}
                                        value={formData.phaseType}
                                    >
                                        <Radio className={style['modal-form-radio']} value="自研">自研</Radio>
                                        <Radio className={style['modal-form-radio']} value="分包">分包</Radio>
                                    </Radio.Group>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>项目奖金类型：</label>
                                    <span className={style['modal-form-input']} style={{ border: 'none', background: 'none', padding: 0 }}>固定金额</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>填写金额：</label>
                                    <input
                                        className={style['modal-form-input']}
                                        type="number"
                                        placeholder="请输入"
                                        value={formData.bonusAmount}
                                        onChange={(e) => handleInputChange('bonusAmount', e.target.value)}
                                    />
                                    <span className={style['modal-form-desc']}>元</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>负责人：</label>
                                    <input
                                        className={style['modal-form-input']}
                                        type="text"
                                        placeholder="请输入负责人"
                                        value={formData.leader}
                                        onChange={(e) => handleInputChange('leader', e.target.value)}
                                    />
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段开始时间：</label>
                                    <DatePicker
                                        className={style['modal-form-input']}
                                        onChange={(date, dateString) => handleTimeChange('startTime', date, dateString)}
                                        value={formData.startTime}
                                    />
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段完结时间：</label>
                                    <DatePicker
                                        className={style['modal-form-input']}
                                        onChange={(date, dateString) => handleTimeChange('endTime', date, dateString)}
                                        value={formData.endTime}
                                    />
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段工期天数：</label>
                                    <input
                                        className={style['modal-form-input']}
                                        type="text"
                                        placeholder="根据选择的项目时间自动计算天数"
                                        disabled
                                        value={formData.period}
                                    />
                                    <span className={style['modal-form-desc']}>天</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>阶段工时数：</label>
                                    <input
                                        className={style['modal-form-input']}
                                        type="text"
                                        placeholder="根据选择的项目时间自动计算工时"
                                        disabled
                                        value={formData.hour}
                                    />
                                    <span className={style['modal-form-desc']}>小时</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>是否计算项目工时：</label>
                                    <select
                                        className={style['modal-form-select']}
                                        value={formData.calculateWorkTime}
                                        onChange={(e) => handleInputChange('calculateWorkTime', e.target.value)}
                                    >
                                        <option value="">请选择</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                    <span className={style['modal-form-desc']}>若该阶段无需计算项目工期时间，请选择"否"</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>是否为确认阶段：</label>
                                    <select
                                        className={style['modal-form-select']}
                                        value={formData.isConfirmPhase}
                                        onChange={(e) => handleInputChange('isConfirmPhase', e.target.value)}
                                    >
                                        <option value="">请选择</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                    <span className={style['modal-form-desc']}>若该阶段需要签订确认函件，则请选择"是"</span>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>是否为付款阶段：</label>
                                    <select
                                        className={style['modal-form-select']}
                                        value={formData.isPaymentPhase}
                                        onChange={(e) => handleInputChange('isPaymentPhase', e.target.value)}
                                    >
                                        <option value="">请选择</option>
                                        <option value="是">是</option>
                                        <option value="否">否</option>
                                    </select>
                                </div>
                                <div className={style['modal-form-row']}>
                                    <label className={style['modal-form-label']}><span className={style['modal-form-required']}>*</span>需交付文件：</label>
                                    <div className={style['modal-form-checkbox-group']}>
                                        <label className={style['modal-form-checkbox']}>
                                            <input
                                                type="checkbox"
                                                checked={formData.deliverFiles.includes('思维导图')}
                                                onChange={(e) => {
                                                    const files = e.target.checked
                                                        ? [...formData.deliverFiles, '思维导图']
                                                        : formData.deliverFiles.filter(f => f !== '思维导图');
                                                    handleInputChange('deliverFiles', files);
                                                }}
                                            /> 思维导图
                                        </label>
                                        <label className={style['modal-form-checkbox']}>
                                            <input
                                                type="checkbox"
                                                checked={formData.deliverFiles.includes('原型图')}
                                                onChange={(e) => {
                                                    const files = e.target.checked
                                                        ? [...formData.deliverFiles, '原型图']
                                                        : formData.deliverFiles.filter(f => f !== '原型图');
                                                    handleInputChange('deliverFiles', files);
                                                }}
                                            /> 原型图
                                        </label>
                                        <label className={style['modal-form-checkbox']}>
                                            <input
                                                type="checkbox"
                                                checked={formData.deliverFiles.includes('UI设计稿')}
                                                onChange={(e) => {
                                                    const files = e.target.checked
                                                        ? [...formData.deliverFiles, 'UI设计稿']
                                                        : formData.deliverFiles.filter(f => f !== 'UI设计稿');
                                                    handleInputChange('deliverFiles', files);
                                                }}
                                            /> UI设计稿
                                        </label>
                                        <label className={style['modal-form-checkbox']}>
                                            <input
                                                type="checkbox"
                                                checked={formData.deliverFiles.includes('技术文档')}
                                                onChange={(e) => {
                                                    const files = e.target.checked
                                                        ? [...formData.deliverFiles, '技术文档']
                                                        : formData.deliverFiles.filter(f => f !== '技术文档');
                                                    handleInputChange('deliverFiles', files);
                                                }}
                                            /> 技术文档
                                        </label>
                                    </div>
                                </div>
                                <div className={style['modal-form-row']} style={{ alignItems: 'flex-start' }}>
                                    <label className={style['modal-form-label']} style={{ marginTop: '6px' }}>备注：</label>
                                    <textarea
                                        className={style['modal-form-textarea']}
                                        placeholder="请输入"
                                        value={formData.remark}
                                        onChange={(e) => handleInputChange('remark', e.target.value)}
                                    />
                                </div>
                            </div>
                        </Modal>
                        <div>
                            <input
                                type="text"
                                placeholder="搜索"
                                className={style['project-search']}
                                value={searchKeyword}
                                onChange={(e) => handleSearch(e.target.value)}
                            />
                            <button
                                className={style['project-button'] + (viewMode === 'list' ? ' ' + style['active'] : '')}
                                onClick={() => handleViewModeChange('list')}
                            >
                                <UnorderedListOutlined />
                            </button>
                            <button
                                className={style['project-button'] + (viewMode === 'card' ? ' ' + style['active'] : '')}
                                onClick={() => handleViewModeChange('card')}
                            >
                                <AppstoreOutlined />
                            </button>
                            <button className={style['project-button']} onClick={handleExportExcel}><LineHeightOutlined /></button>
                            <button className={style['project-button']}><SearchOutlined /></button>
                        </div>
                    </div>
                    {viewMode === 'list' ? (
                        <div style={{ overflowX: 'auto', marginTop: 24 }}>
                            <table className={style['npp-table']}>
                                <thead>
                                    <tr>
                                        <th>
                                            <input
                                                type="checkbox"
                                                className={style['npp-checkbox']}
                                                checked={allChecked}
                                                ref={el => { if (el) el.indeterminate = indeterminate; }}
                                                onChange={handleSelectAll}
                                            />
                                        </th>
                                        <th>状态</th>
                                        <th>进度</th>
                                        <th>阶段名称</th>
                                        <th>负责人</th>
                                        <th>阶段开始时间</th>
                                        <th>阶段完结时间</th>
                                        <th>工期天数</th>
                                        <th>工时</th>
                                        <th>实际完成时间</th>
                                        <th>实际工期天数</th>
                                        <th>实际工时</th>
                                        <th>需交付文件</th>
                                        <th>备注</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {tableData.map(row => (
                                        <tr key={row.id}>
                                            <td>
                                                <input
                                                    type="checkbox"
                                                    className={style['npp-checkbox']}
                                                    checked={selectedRowKeys.includes(row.id)}
                                                    onChange={() => handleSelectRow(row.id)}
                                                />
                                            </td>
                                            <td><span className={style['npp-status'] + ' ' + style[`npp-status-${row.statusType}`]}>{row.status}</span></td>
                                            <td>{row.progress}</td>
                                            <td>{row.phase}</td>
                                            <td>{row.leader}</td>
                                            <td>{row.startTime ? new Date(row.startTime).toLocaleDateString() : '--'}</td>
                                            <td>{row.endTime ? new Date(row.endTime).toLocaleDateString() : '--'}</td>
                                            <td>{row.period}天</td>
                                            <td>{row.hour}h</td>
                                            <td>{row.realEndTime ? new Date(row.realEndTime).toLocaleDateString() : '--'}</td>
                                            <td>{row.realPeriod ? row.realPeriod + '天' : '--'}</td>
                                            <td>{row.realHour ? row.realHour + 'h' : '--'}</td>
                                            <td>{row.files}</td>
                                            <td>{row.remark}</td>
                                            <td>
                                                <button
                                                    className={style['npp-btn'] + ' ' + style['npp-btn-orange']}
                                                    onClick={() => navigate(`/projects/tasks`)}
                                                >任务列表</button>
                                                <Popconfirm
                                                    title="确定要删除这个项目阶段吗？"
                                                    onConfirm={() => handleDelete(row.id)}
                                                    okText="确定"
                                                    cancelText="取消"
                                                >
                                                    <button className={style['npp-btn'] + ' ' + style['npp-btn-green']}>删除</button>
                                                </Popconfirm>
                                            </td>
                                        </tr>
                                    ))}
                                </tbody>
                            </table>
                            <div className={style['npp-table-bottom']}>
                                显示第 {(currentPage - 1) * pageSize + 1} 到第 {Math.min(currentPage * pageSize, total)} 条记录，总共 {total} 条记录
                            </div>
                        </div>
                    ) : (
                        <div style={{ marginTop: 24 }}>
                            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(350px, 1fr))', gap: '16px' }}>
                                {tableData.map(row => (
                                    <div key={row.id} style={{
                                        border: '1px solid #d9d9d9',
                                        borderRadius: '8px',
                                        padding: '16px',
                                        backgroundColor: '#fff',
                                        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
                                    }}>
                                        <div style={{ marginBottom: '12px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                                            <strong>阶段: {row.phase}</strong>
                                            <span style={{
                                                padding: '2px 8px',
                                                borderRadius: '4px',
                                                fontSize: '12px',
                                                backgroundColor: row.statusType === 'blue' ? '#e6f7ff' :
                                                    row.statusType === 'orange' ? '#fff7e6' : '#f5f5f5',
                                                color: row.statusType === 'blue' ? '#1890ff' :
                                                    row.statusType === 'orange' ? '#fa8c16' : '#666'
                                            }}>
                                                {row.status}
                                            </span>
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>负责人:</strong> {row.leader}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>进度:</strong> {row.progress}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>开始时间:</strong> {row.startTime ? new Date(row.startTime).toLocaleDateString() : '--'}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>结束时间:</strong> {row.endTime ? new Date(row.endTime).toLocaleDateString() : '--'}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>工期:</strong> {row.period}天
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>工时:</strong> {row.hour}h
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>实际完成时间:</strong> {row.realEndTime ? new Date(row.realEndTime).toLocaleDateString() : '--'}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>实际工期:</strong> {row.realPeriod ? row.realPeriod + '天' : '--'}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>实际工时:</strong> {row.realHour ? row.realHour + 'h' : '--'}
                                        </div>
                                        <div style={{ marginBottom: '8px' }}>
                                            <strong>需交付文件:</strong> {row.files || '--'}
                                        </div>
                                        <div style={{ marginBottom: '12px' }}>
                                            <strong>备注:</strong> {row.remark || '--'}
                                        </div>
                                        <div style={{ display: 'flex', gap: '8px', justifyContent: 'flex-end' }}>
                                            <button
                                                className={style['npp-btn'] + ' ' + style['npp-btn-orange']}
                                                onClick={() => navigate(`/projects/tasks`)}
                                                style={{ fontSize: '12px', padding: '4px 8px' }}
                                            >任务列表</button>
                                            <Popconfirm
                                                title="确定要删除这个项目阶段吗？"
                                                onConfirm={() => handleDelete(row.id)}
                                                okText="确定"
                                                cancelText="取消"
                                            >
                                                <button
                                                    className={style['npp-btn'] + ' ' + style['npp-btn-green']}
                                                    style={{ fontSize: '12px', padding: '4px 8px' }}
                                                >删除</button>
                                            </Popconfirm>
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    )
}

export default NewProjectPhase;